Guide Elementor - Utilisation

1. Interface de base

Panneau de gauche

Widgets (éléments)
Structure globale
Réglages de la page
Historique des actions
Responsive
Navigateur de la page

Raccourcis clavier principaux

Ctrl + Z : Annuler
Ctrl + Y : Rétablir
Ctrl + P : Aperçu
Ctrl + S: Sauvegarder
Ctrl + D : Dupliquer

Pour une meilleure expérience d'édition, utilisez le mode plein écran (icône en bas à gauche) et masquez le panneau WordPress.

Attention , la plupart du temps les raccourcis clavier ne fonctionnent pas , il faut privilégier la création à la souris le temps de maitriser l'environnement.

2. Structure et mise en page

Sections

Section normale (largeur limitée)
Section pleine largeur
Section étirée
Conteneur personnalisé

Une section peut contenir plusieurs colonnes et s'étendre sur toute la largeur de l'écran.

Colonnes

Largeur personnalisée (%)
Espacement interne/externe
Ordre responsive
Alignement vertical

Utilisez le glisser-déposer sur le bord des colonnes pour ajuster rapidement leurs largeurs.

3. Widgets les plus utilisés

Contenu basique

En-tête
Texte éditeur
Image
Bouton
Vidéo
Séparateur

Éléments avancés

Carrousel d'images
Galerie
Accordéon
Onglets
Témoignages
Formulaire

4. Guide des Paramètres Elementor

Structure des paramètres

Les paramètres sont organisés en 3 onglets principaux :

Contenu : Modification du contenu et des options principales
Style : Personnalisation de l'apparence
Avancé : Options supplémentaires et techniques

Typographie

Comment utiliser :

Cliquez sur l'icône "Typographie" dans les paramètres
Famille de police : Choisissez parmi les polices système ou Google Fonts
Taille :
- PX : Taille fixe
- EM : Relative au parent
- REM : Relative à la racine
- % : Pourcentage du parent
Poids : De 100 (fin) à 900 (gras)
Transform : Majuscules, minuscules, capitale

Utilisez REM pour une meilleure adaptation responsive

Couleurs et Fonds

Options disponibles :

Couleur classique : Sélecteur de couleur simple
Couleurs globales :
- Créez des couleurs réutilisables
- Modifiez une fois, changez partout
Dégradés :
- Choisissez l'angle
- Ajoutez plusieurs couleurs
- Réglez les positions
Images de fond :
- Position (center, top, etc.)
- Répétition
- Taille (cover, contain)
- Attachment (fixed, scroll)

Margin & Padding

Comment ça marche :

Margin : Espace externe
- Cliquez sur l'icône lien pour modifier tous les côtés
- Ou modifiez chaque côté individuellement
- Valeurs négatives autorisées pour margin
Padding : Espace interne
- Toujours positif
- Affecte la taille totale de l'élément

Utilisez le padding pour l'espacement interne des sections et colonnes, et margin pour l'espacement entre les widgets

Bordures & Coins arrondis

Type de bordure :
- Solid : Ligne pleine
- Dashed : Pointillés
- Dotted : Points
- Double : Double ligne
Coins arrondis (Border Radius) :
- Tous les coins en même temps
- Ou chaque coin individuellement
- Valeurs en px ou %

Position & Z-index

Position :
- Default : Suit le flux normal
- Absolute : Par rapport au parent
- Relative : Par rapport à sa position
- Fixed : Par rapport à la fenêtre
Z-index :
- Contrôle la superposition
- Plus le nombre est élevé, plus l'élément est au-dessus

Animations & Effets

Entrée :
- Choisissez l'animation
- Réglez la durée
- Définissez le délai
Hover :
- Transition au survol
- Changement de couleur
- Transformation

Évitez les animations trop longues ou trop nombreuses

Paramètres Responsive

Comment configurer :

Utilisez les icônes d'appareils en bas du panneau
Ordre de configuration recommandé :
1. Desktop d'abord (>1024px)
2. Tablette ensuite (768-1024px)
3. Mobile en dernier (<768px)
Options par appareil :
- Taille de texte différente
- Espacement adapté
- Masquer/Afficher des éléments
- Réorganiser les colonnes

Testez toujours sur de vrais appareils après configuration

Points importants :

Les paramètres de l'appareil plus petit écrasent ceux du plus grand
Utilisez "Réinitialiser" pour revenir aux valeurs par défaut
Pensez à sauvegarder régulièrement
Les paramètres globaux affectent tout le site

5. Design Responsive

Desktop: >1024px Tablette: 768px-1024px Mobile: <767px

Ajustements par appareil

Taille des textes
Espacement
Alignement
Visibilité
Ordre des colonnes

Commencez toujours par le design desktop, puis adaptez pour tablette et mobile.

6. Paramètres globaux

Comment accéder aux paramètres globaux

Cliquez sur l'icône hamburger (3 lignes) en haut à gauche
Sélectionnez "Réglages du site"
Ou utilisez le raccourci Ctrl + K

Couleurs globales

Système de couleurs :

Couleurs primaires
- Utilisées pour les éléments principaux
- Boutons d'action
- En-têtes importants
Couleurs secondaires
- Accents et surbrillance
- Éléments secondaires
- Hover states
Couleurs texte
- Texte principal
- Texte secondaire
- Texte clair pour fonds sombres

Créez des variables de couleur pour une cohérence sur tout le site

Typographie globale

Styles de texte par défaut :

Titres (H1-H6)
- Police principale des titres
- Tailles prédéfinies
- Poids de police
- Espacement des lettres
Corps de texte
- Police de paragraphe
- Taille de base
- Hauteur de ligne
- Espacement des paragraphes

Styles des conteneurs

Paramètres par défaut :

Largeur du contenu
- Largeur maximale du site
- Breakpoints responsive
- Marges latérales
Espacements
- Gap entre widgets
- Padding des sections
- Margin entre sections

Réglages généraux

Options du site :

Lightbox
- Style de la galerie
- Navigation
- Transitions
CSS personnalisé
- Règles globales
- Classes personnalisées
Paramètres de page
- Défaut des marges
- Style de page standard

Kits de style (Avancé / Facultatif)

Un Kit de Style est une "charte graphique numérique" qui regroupe tous vos paramètres visuels pour maintenir la cohérence sur votre site.

Composants inclus :

Système de couleurs
- Palette principale (primaire, secondaire, accent)
- Couleurs système (succès, erreur, info)
- Couleurs de texte et arrière-plans
Typographie globale
- Police principale et secondaire
- Hiérarchie des titres (H1-H6)
- Styles de texte par défaut
Styles de composants
- Boutons (normal, hover, disabled)
- Images et galeries
- Formulaires et entrées
- Espacements standards

Utilisation :

Création d'un kit
- Accès via "Réglages du site" → "Kit de style"
- Configuration des couleurs et typographie
- Définition des styles de composants
- Sauvegarde du kit
Export/Import
- Export : Kit de style → Export (.zip)
- Import : Kit de style → Import
- Réutilisation sur d'autres sites

Bonnes pratiques :

Planifiez votre système de design avant de créer le kit
Limitez votre palette de couleurs pour plus de cohérence
Versionnez vos kits (v1.0, v1.1, etc.)
Testez après import sur un nouveau site

Attention :

L'import écrase les styles existants
Les modifications affectent tout le site
Faites une sauvegarde avant les changements majeurs